
/*
 *    <li id="image-1" class="thumbnail">
  <a style="background:url(img/mfyt/1.png)" title="Sample Image 1" href="img/mfyt/1.png">
  <img class="grayscale" src="img/mfyt/1.png" alt="图片 1">
  </a>
    </li>
    <script src="js/charisma.js"></script>
 * */

//图片遍历显示及渲染   上传服务器改为47.93.0.157  //wifi 172.27.35.3  //wf 10.52.111.53
function build_picture_list(result) {
    //$("#picture_list_ul").empty();
    var pictures = result.extend.pictureList;
    $.each(pictures, function(index, item) {
    	if(item.ismusicpic!=1){
            var myImg = $("<img>").attr("src", "http://localhost:8080/images/" + item.realname).css("height","100px")
            .attr("alt", item.title).addClass("grayscale");
            var myImgA = $("<a></a>").attr("style", "background:url(" + "http://localhost:8080/images/" + item.realname + ")")
                .attr("title", item.title)
                .attr("href", "http://localhost:8080/images/" + item.realname);
            var myImgLi = $("<li></li>").addClass("thumbnail");
            
            
            $("#picture_list_ul")
            .append(myImgLi
                .append(myImgA
                    .append(myImg)));
    	}

        
        //gallery controls container animation
        
/*        '<p><a href="#" class="gallery-edit btn"><i class="glyphicon glyphicon-edit"></i></a> 
		<a href="#" class="gallery-delete btn"><i class="glyphicon glyphicon-remove"></i></a></p>'
*/        
    	
    	/*图片修改逻辑*/

    	
        $(myImgLi).hover(function() {
        	//动态生成编辑按钮
        	var editA=$("<a></a>").attr("onclick"," show_picture_eidt();").addClass("gallery-edit btn").attr("id", "editpicture-"+item.id)
        	.attr("name",item.id)
        	.attr("edit-type","picture").attr("edit-name",item.title).attr("edit-id",item.id).attr("edit-realname",item.realname);
        	var editAI='<i class="glyphicon glyphicon-edit"></i>';
        	
        	$(editA).append(editAI);
        	//动态生成删除按钮
        	var deleteA=$("<a></a>").attr("href","#").addClass("gallery-delete btn").attr("id", "deletepicture-"+item.id)
        	.attr("name",item.id).attr("value",item.id)
        	.attr("del-type","picture").attr("del-name",item.title).attr("del-id",item.id).attr("del-realname",item.realname);
        	var deleteAI='<i class="glyphicon glyphicon-remove"></i>';
        	
        	$(deleteA).append(deleteAI);
        	
        	var allP=$("<p></p>").append(editA).append(deleteA);
        	var allDiv=$("<div></div>").addClass("well gallery-controls");
        	allDiv.append(allP);
            $('img', this).fadeToggle(1000);
            $(this).find('.gallery-controls').remove();
            $(this).append(allDiv);
            $(this).find('.gallery-controls').stop().animate({ 'margin-top': '-1' }, 400);
        }, function() {
            $('img', this).fadeToggle(1000);
            $(this).find('.gallery-controls').stop().animate({ 'margin-top': '-30' }, 200, function() {
                $(this).remove();
            });
        });
        

    })
    
    
    
    //图片展示js
   
    //gallery image controls example
    //gallery delete
    $('.thumbnails').on('click', '.gallery-delete', function (e) {
        e.preventDefault();
        //get image id
        //alert($(this).parents('.thumbnail').attr('id'));
        //$(this).parents('.thumbnail').fadeOut();
    });
    //gallery edit
    $('.thumbnails').on('click', '.gallery-edit', function (e) {
        e.preventDefault();
        //get image id
        //alert($(this).parents('.thumbnail').attr('id'));
    });

    //gallery colorbox
    $('.thumbnail a').colorbox({
        rel: 'thumbnail a',
        transition: "elastic",
        maxWidth: "95%",
        maxHeight: "95%",
        slideshow: true
    });

    //gallery fullscreen
    $('#toggle-fullscreen').button().click(function () {
        var button = $(this), root = document.documentElement;
        if (!button.hasClass('active')) {
            $('#thumbnails').addClass('modal-fullscreen');
            if (root.webkitRequestFullScreen) {
                root.webkitRequestFullScreen(
                    window.Element.ALLOW_KEYBOARD_INPUT
                );
            } else if (root.mozRequestFullScreen) {
                root.mozRequestFullScreen();
            }
        } else {
            $('#thumbnails').removeClass('modal-fullscreen');
            (document.webkitCancelFullScreen ||
                document.mozCancelFullScreen ||
                $.noop).apply(document);
        }
    });
   
}
/*
 *    <div class="audio-wrap">
                            <audio id="playeryanhua" src="http://47.93.0.157:8080/images/%E6%89%93%E4%B8%8A%E8%8A%B1%E7%81%AB.mp3" width="100%" height="42" controls></audio>
                        </div>
 * */

// 音乐遍历显示及渲染
function build_music_list(result) {
  //$("#picture_list_ul").empty();
  var music = result.extend.musicList;
  $.each(music, function(index, item) {
          var myImg = $("<img >").attr("src", "http://localhost:8080/images/" + item.pictitle)
          .attr("alt", item.musicname).addClass("grayscale").css("width","310px");
          var myImgA = $("<a  ></a>").attr("style", "background:url(" + "http://localhost:8080/images/" + item.pictitle + ")")
              .attr("title", item.musicname).css("width","310px")
              .attr("href", "http://localhost:8080/images/" + item.pictitle);
          var myImgLi = $("<li></li>").addClass("thumbnail");
          
          var musicDiv=$("<div></div>").addClass("audio-wrap")
          var audio=$("<audio  controls/>").attr("width","100").attr("height","30").attr("src","http://localhost:8080/images/"+item.realname);
          
          musicDiv.append(audio);
          
          $("#music_list_ul")
          .append(myImgLi
              .append(myImgA
                  .append(myImg))
                  .append(musicDiv)
              
          );

      
      //gallery controls container animation
      
/*        '<p><a href="#" class="gallery-edit btn"><i class="glyphicon glyphicon-edit"></i></a> 
		<a href="#" class="gallery-delete btn"><i class="glyphicon glyphicon-remove"></i></a></p>'
*/        
      $(myImgLi).hover(function() {
      	//动态生成编辑按钮
      	var editA=$("<a></a>").attr("onclick"," show_music_eidt();").addClass("gallery-edit btn")
      	.attr("id", "editmusic-"+item.id).attr("name",item.id).attr("edit-type","music")
      	.attr("edit-name",item.musicname).attr("edit-id",item.id).attr("edit-pictitle",item.pictitle)
      	.attr("edit-musicrealname",item.realname);
      	var editAI='<i class="glyphicon glyphicon-edit"></i>';
      	
      	$(editA).append(editAI);
      	//动态生成删除按钮
      	var deleteA=$("<a></a>").attr("href","#").addClass("gallery-delete btn")
      	.attr("id", "deletemusic-"+item.id).attr("name",item.id)
      	.attr("del-type","music").attr("del-name",item.musicname)
      	.attr("del-id",item.id).attr("del-pictitle",item.pictitle).attr("del-musicrealname",item.realname);
      	var deleteAI='<i class="glyphicon glyphicon-remove"></i>';
      	
      	$(deleteA).append(deleteAI);
      	
      	var allP=$("<p></p>").append(editA).append(deleteA);
      	var allDiv=$("<div></div>").addClass("well gallery-controls");
      	allDiv.append(allP);
          $('img', this).fadeToggle(1000);
          $(this).find('.gallery-controls').remove();
          $(this).append(allDiv);
          $(this).find('.gallery-controls').stop().animate({ 'margin-top': '-1' }, 400);
      }, function() {
          $('img', this).fadeToggle(1000);
          $(this).find('.gallery-controls').stop().animate({ 'margin-top': '-30' }, 200, function() {
              $(this).remove();
          });
      });
      

  })
  
  
  
  //图片展示js
 
  //gallery image controls example
  //gallery delete
  $('.thumbnails').on('click', '.gallery-delete', function (e) {
      e.preventDefault();
      //get image id
      //alert($(this).parents('.thumbnail').attr('id'));
      //$(this).parents('.thumbnail').fadeOut();
  });
  //gallery edit
  $('.thumbnails').on('click', '.gallery-edit', function (e) {
      e.preventDefault();
      //get image id
      //alert($(this).parents('.thumbnail').attr('id'));
  });

  //gallery colorbox
  $('.thumbnail a').colorbox({
      rel: 'thumbnail a',
      transition: "elastic",
      maxWidth: "95%",
      maxHeight: "95%",
      slideshow: true
  });

  //gallery fullscreen
  $('#toggle-fullscreen').button().click(function () {
      var button = $(this), root = document.documentElement;
      if (!button.hasClass('active')) {
          $('#thumbnails').addClass('modal-fullscreen');
          if (root.webkitRequestFullScreen) {
              root.webkitRequestFullScreen(
                  window.Element.ALLOW_KEYBOARD_INPUT
              );
          } else if (root.mozRequestFullScreen) {
              root.mozRequestFullScreen();
          }
      } else {
          $('#thumbnails').removeClass('modal-fullscreen');
          (document.webkitCancelFullScreen ||
              document.mozCancelFullScreen ||
              $.noop).apply(document);
      }
  });
 
}


function show_picture_eidt(){
	
	$("#pictureUpdateModal").modal({
			backdrop:"static"
		});
}
function show_music_eidt(){

	$("#musicUpdateModal").modal({
			backdrop:"static"
		});
}

//修改按钮逻辑
$(document).on("click",".gallery-edit",function(){
	var id=$(this).attr("edit-id");
	var type=$(this).attr("edit-type");
	var name=$(this).attr("edit-name");
		if(type==="picture"){
			
			getPictureInfo(id);
			
			show_picture_eidt();
		}else{
			var pictitle=$(this).attr("edit-pictitle");
			var musicrealname=$(this).attr("edit-musicrealname");
			
			getMusicInfo(id);
			
			show_music_eidt();
		
		}
	
})
//修改图片信息回显
function showPictureInfo(result){
	 var picture = result.extend.picture;
	
	$("#title_update_input").val(picture.title);
	$("#picturetype_update_select").val(picture.type);
	$("#builder_update_input").val(picture.builder);
	$("#intro_update_input").val(picture.intro);
	$("#detalis").val(picture.detalis);
	$("#picture_update_btn").attr("picid",picture.id).attr("realname",picture.realname);
}

//修改音乐信息回显
function showMusicInfo(result){
	 var picture = result.extend.picture;
	var music=result.extend.music;
	$("#music_title_update_input").val(picture.title);
	$("#music_picturetype_update_select").val(picture.type);
	$("#music_builder_update_input").val(picture.builder);
	$("#music_intro_update_input").val(picture.intro);
	$("#musicname").val(music.musicname);
	$("#music_detalis").val(picture.detalis);
	$("#music_update_btn").attr("pictureid",picture.id)
	.attr("musicid",music.id).attr("musicrealname",music.realname).attr("picrealname",picture.realname);
}






